<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实现常规搜索功能，并用RxJS实现</title>
</head>

<body>

    <!-- 例子--实现常规搜索功能 -->

    <input type="text" id="text">

    <script>
        var text = document.querySelector('#text');
        text.addEventListener('keyup', (e) => {
            var searchText = e.target.value;

            //ajax
            $.ajax({
                url: `search.qq.com/${searchText}`,
                success: data => {

                    // 拿到后台返回数据，并展示搜索结果
                    render(data);
                }
            })

            //弊端：
            //keyup 击键多少次 就会发送多少次请求
            //输入 输入玛 利 亚 发送了三次请求 多了两次
            //已无用的请求仍然执行
            //一开始搜了“爱迪生”，然后马上改搜索“达尔文”。结果后台返回了“爱迪生”的搜索结果，
            //执行渲染逻辑后结果框展示了“爱迪生”的结果，而不是当前正在搜索的“达尔文”，这是不正确的。

        })
    </script>

    <!-- 优化  -->
    <!-- 减少请求 -->
    <input id="text1"></input>

    <script>
        var text = document.querySelector('#text1');
        timer = null;
        text.addEventListener('keyup', (e) => {

            // 在 250 毫秒内进行其他输入，则清除上一个定时器
            clearTimeout(timer);

            //250毫秒后触发
            timer = setTimeout(() => {
                console.log("发送请求…");
            }, 250)

            //setTimeout 函数流 减少多余请求
        })

    </script>

    <!-- 优化已无用的请求仍然执行,增加判断 -->
    <!-- 端判断返回数据与当前搜索是否一致，一致才走到渲染逻辑。 -->

    <input type="text" id="text2">

    <script>

        var text = document.querySelector("#text2");
        timer = null;
        currentSearch = '';

        text.addEventListener('keyup', (e) => {
            //清楚定时
            clearTimeout(timer)

            timer.setTimeout(function () {

                //声明一个当前搜索的状态变量
                currentSearch = '书';

                var searchText = e.target.value;
                $.ajax({
                    url: `search.qq.com/${searchText}`,
                    success: data => {
                        //判断数据返回和当前搜索一致
                        if (data.search == currentSearch) {
                            //渲染
                            render(data);
                        } else {
                            //...
                        }
                    }
                }, 250)
            })

        })

    </script>

    <!-- 以上虽然做了优化,但代码显得过多冗余,用RxJS实现: -->
    <script>
        var text = document.querySelector("#text");
        var inputStream = Observable.fromEvent(text,'keyup')
        .debounceTime(250)
        .pluck('target','value')
        .switchMap(url=>Http.get(url))
        .subscribe(data=>render(data));
                            
    </script>

</body>

</html>